<!DOCTYPE html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>个人中心</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

    <!-- CSS here -->
    <link rel="stylesheet" href="assets/css/preloader.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/backToTop.css">
    <link rel="stylesheet" href="assets/css/meanmenu.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
    <link rel="stylesheet" href="assets/css/fontAwesome5Pro.css">
    <link rel="stylesheet" href="assets/css/ui-range-slider.css">
    <link rel="stylesheet" href="assets/css/default.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/my-style3.css">
    <style media="screen">
        * {
            font-family: "微软雅黑";
        }

        .header__search-box::before {
            content: none;
        }

        #keyword {
            padding-left: 25px;
            height: 40px;
            padding-right: 0;
        }

        .header__search {
            width: 70%;
            padding: 20px 0;
        }

        .header__search-box button {
            height: 40px;
            line-height: 40px;
            padding: 0 30px;
        }

        .cart__toggle {
            width: 40px;
            height: 40px;
            margin: 20px;
        }

        .cart__toggle::after {
            top: -5px;
            right: 9px;
            font-size: 15px;
            color: #fff;
        }

        .my-nav {
            width: 60%;
            float: left;
        }

        .my-cart {
            float: left;
        }

        .main-menu ul li a {
            padding: 28px 0;
        }

        .my-div {
            float: right;
            width: 40%;
        }
        #searchBtn{
            background-color: #D01418;
            color: #fff;
        }
        #searchBtn:hover{
            background-color: #FCB700;
        }
        .cart__total-item{
            background-color: #D01418;
        }
        .cart__toggle:hover{
            background: #ffffff;
            border-color: #ffffff;
        }
        .cart__toggle:hover .cart__total-item {
            background: #d01418;
            color: #ffffff;
        }
        .cart__toggle:hover::after{
            color: #d01418;
        }
        .main-menu .detailsUl ul.submenu li a{
            padding: 4px 20px;
        }
        .my-pageNum{
            color: #000000;
        }
        .my-pageNum:hover{
            color: #fff;
        }
        .table .tr .order-item-1{
            width: 52%;
        }
        .table .tr .order-item-2{
            width: 12%;
        }
        .my-background-color{
            width: 87px;
            margin: 2px auto;
        }
        .my-background-color:hover{
            color: #fff;
            background-color: #2a2a2a;
        }
        .my-background-color-btn{
            color: red !important;
            border-color: red !important;
        }
        .my-background-color-btn:hover{
            color: #fff !important;
            background-color: #FCB700 !important;
            border-color: #FCB700 !important;
        }
        .hide:hover .hi{
            display: block;
        }
        .cart__title span{
            color: #888;
        }
        .my-cart-mini ul li{
            margin-right: 0;
            display: block;
        }
        .my-cart-mini ul li a{
            padding: 0;
            color: #2a2a2a;
            font-size: 14px;
        }
        #goCart a{
            color: #fff;
        }
        #goCart a:hover{
            color: #D01418;
            font-weight: 700;
        }
        .tdLi{
            position: relative;
        }
        .hi2{
            position: absolute;
            max-height: 300px;
            padding-left: 5px;
            margin-bottom: 20px;
            line-height: 20px;
            top: -102px;
            right: 105px;
            z-index: 100;
            text-align: left;
            min-width: 337px;
            background: white;
            box-shadow: -3px -3px 20px 0px #ccc;
            display: none;
            overflow-y: auto;
        }
        .tdLi:hover .hi2{
            display: block;
        }
        .hi2 .p-tit {
            height: 40px;
            line-height: 40px;
            font-weight: 700;
            border-bottom: 1px solid #e3e3e3;
            padding-top: 0;
            padding-left: 10px;
            padding-bottom: 18px;
        }
        .hi2 .hideList ul li {
            margin-bottom: 20px;
            width: 340px;
            padding: 15px 10px 0 15px;
            border-left: 1px solid #e3e3e3;
        }
        del{
            font-family: "Rubik", sans-serif;
        }
        .my-no-order{
            text-align: center;
            margin: 30px;
            font-size: 25px;
            font-family: cursive;
        }
        .my-pageNum-color{
            color: #2a2a2a;
        }
    </style>
</head>

<body>
<div id="nav">
    <nav>
        <!-- 导航栏 -->
        <div class="main-menu main-menu-3 d-none d-md-block">
            <nav class="my-nav">
                <ul>
                    <li>
                        <a href="index.html">首页 </a>
                    </li>
                    <li><a href="product.html">账户设置 <i class="far fa-angle-down"></i></a>
                        <ul class="submenu">
                            <li><a href="/center.html">订单中心</a></li>
                            <li><a href="http://huyulu666.top:81/">个人信息管理中心</a></li>
                        </ul>
                    </li>
                    <li><a href="about.html">社区资讯 </a></li>
                    <li><a href="contact.html">我的消息 </a></li>
                </ul>
            </nav>

            <div class="my-div col-xl-9 col-lg-9 col-md-9">
                <div class="header__info-right d-flex justify-content-between">
                    <div class="header__search header__search-4 f-left d-none d-sm-block">
                        <form action="http://huyulu666.top/search.html" method="get">
                            <div id="search-button" class="header__search-box header__search-box-4">
                                <input id="keyword" type="text" name="keyword" placeholder="请输入您需要的二手书籍">
                                <button id="searchBtn" type="submit" style="font-weight: 700">搜 索</button>
                            </div>
                        </form>
                    </div>
                    <div class="my-cart cart__mini-wrapper d-none d-sm-flex f-right p-relative">
                        <a href="javascript:void(0);" class="cart__toggle">
                            <span class="cart__total-item">01</span>
                        </a>
                        <div class="cart__mini cart__mini-4 my-cart-mini">
                            <div class="cart__close">
                                <button type="button" class="cart__close-btn"><i class="fal fa-times"></i>
                                </button>
                            </div>
                            <ul>
                                <li>
                                    <div class="cart__title">
                                        <h4>我的购物车</h4>
                                        <span>（购物车中有 1 件商品）</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="cart__item d-flex justify-content-between align-items-center">
                                        <div class="cart__inner d-flex">
                                            <div class="cart__thumb">
                                                <a href="product-details.html">
                                                    <img src="assets/img/shop/product/cart/cart-mini-1.jpg"
                                                         alt="">
                                                </a>
                                            </div>
                                            <div class="cart__details">
                                                <h6><a href="product-details.html"> Samsung C49J89: £875,
                                                    Debenhams Plus </a></h6>
                                                <div class="cart__price">
                                                    <span>$255.00</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="cart__del">
                                            <a href="#"><i class="fal fa-trash-alt"></i></a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="cart__sub d-flex justify-content-between align-items-center">
                                        <h6>购物车小计</h6>
                                        <span class="cart__sub-total">$255.00</span>
                                    </div>
                                </li>
                                <li id="goCart">
                                    <a href="cart.html" class="t-y-btn t-y-btn-red w-100 mb-10">前往购物车结算</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

</div>

<div style="clear:both;"></div>
<div id="big">
    <div id="bigLeft">
        <ul>
            <h5>订单中心</h5>
            <li style="color:#E4393C;font-weight:800;"><a href="javascript:;">我的订单</a></li>
            <li><a href="javascript:;">评价晒单</a></li>
            <li><a href="javascript:;">我的常购商品</a></li>
        </ul>
        <ul>
            <h5>关注中心</h5>
            <li><a href="javascript:;">关注的书籍</a></li>
            <li><a href="javascript:;">关注的活动</a></li>
        </ul>
        <ul>
            <h5>购售中心</h5>
            <li><a href="javascript:;">出售书籍</a></li>
            <li><a href="javascript:;">发布求购</a></li>
        </ul>
        <ul>
            <h5>设置</h5>
            <li><a href="javascript:;">个人信息</a></li>
            <li><a href="javascript:;">收货地址</a></li>
        </ul>
    </div>
    <div id="bigRight">
        <div class="allBig">
            <div class="allOrder">
                <ul class="allOrderTop">
                    <li>
                        <ol>
                            <li>全部订单</li>
                            <li>待付款</li>
                            <li>待收货</li>
                            <li>待评价</li>
                            <div style="clear:both;"></div>
                        </ol>
                    </li>
                    <li class="allOrderTopLi">我的常购商品</li>
                    <li class="allOrderTopLi">好货清仓</li>
                    <li class="allOrderTopLastLi">
                        <span>订单回收站</span>
                        <div>
                            <input id="searchContent" type="text" value="" placeholder="名称/编号/订单号">
                            <button class="search" onclick="addSearchParamBtn()">搜索</button>
                        </div>
                    </li>
                    <div class="clear:both;"></div>
                </ul>

            </div>
            <div class="details main-menu main-menu-3 d-none d-md-block">
                <ul class="detailsUl">
                    <div class="detailsUlDiv">
                        <li class="detailsLiok detailsLi">
                            <a id="chooseTime" href="javascript:;" style="padding: 0;color: #666; font-size: 12px">[[${personInfo.param.createTimeChina}]] <i class="far fa-angle-down"></i></a>
                            <ul class="submenu">
                                <li><a href="javascript:;" onclick="addSearchParam('createTime', '0')">全部订单</a></li>
                                <li><a href="javascript:;" onclick="addSearchParam('createTime', '1')">近一个月订单</a></li>
                                <li><a href="javascript:;" onclick="addSearchParam('createTime', '3')">近三个月订单</a></li>
                                <li><a href="javascript:;" onclick="addSearchParam('createTime', '6')">半年内订单</a></li>
                                <li><a href="javascript:;" onclick="addSearchParam('createTime', '12')">一年内订单</a></li>
                                <li><a href="javascript:;" onclick="addSearchParam('createTime', '-12')">一年前订单</a></li>
                            </ul>
                        </li>
                        <li class="detailsLi">订单详情</li>
                        <div style="clear:both;"></div>
                    </div>

                    <li class="detailsLi1">收货人</li>
                    <li class="detailsLi1">金额</li>
                    <li class="detailsLi1 detailsLiok my-child-li">
                        <a href="javascript:;" style="padding: 0;color: #666">[[${personInfo.param.statusChina}]] <i class="far fa-angle-down"></i></a>
                        <ul class="submenu">
                            <li><a href="javascript:;" onclick="addSearchParam('status', '-1')">全部状态</a></li>
                            <li><a href="javascript:;" onclick="addSearchParam('status', '0')">待付款</a></li>
                            <li><a href="javascript:;" onclick="addSearchParam('status', '1')">已付款</a></li>
                            <li><a href="javascript:;" onclick="addSearchParam('status', '2')">已发货</a></li>
                            <li><a href="javascript:;" onclick="addSearchParam('status', '3')">已完成</a></li>
                            <li><a href="javascript:;" onclick="addSearchParam('status', '4')">已取消</a></li>
                        </ul>
                    </li>
                    <li class="detailsLi1">操作</li>
                    <div style="clear:both;"></div>
                </ul>
            </div>
            <table class="table" th:each="orderResponse:${personInfo.getOrderPage().getOrderResponseVo()}">
                <tr>
                    <td colspan="7" style="background:#F7F7F7">
                        <span style="color:#AAAAAA" th:text="${orderResponse.order.createTimeChina}">2017-12-09 20:50:10</span>
                        <span><ruby style="color:#AAAAAA">订单号:</ruby> [[${orderResponse.order.orderSn}]]</span>
                        <span th:text="'运费：￥' + ${orderResponse.order.freightAmount}"></span>
                        <i class="table_i5 isShow"></i>
                    </td>
                </tr>
                <tr class="tr">
                    <td colspan="3" class="order-item-1">
                        <div th:each="item:${orderResponse.orderItem}">
                            <img th:src="${item.bookPic}" alt="" class="img" style="max-width: 50px">
                            <div>
                                <p th:text="${item.bookName}">三体1地球往事</p>
                                <div th:text="'单价：' + ${item.bookPrice}"></div>
                            </div>
                            <div style="margin-left:15px;" th:text="' x' + ${item.bookCount}">x1</div>
                            <div style="clear:both"></div>
                        </div>
                    </td>
                    <td class="order-item-2">[[${orderResponse.order.receiverName}]] <i><i class="table_i1"></i></i></td>
                    <td style="padding-left:10px;color:#AAAAB1;" class="order-item-2">
                        <p style="margin-bottom:5px;" th:text="'总额 ￥' + ${orderResponse.order.payAmount}">总额 ￥26.00</p>
                        <hr>
                        <p>在线支付</p>
                    </td>
                    <td class="order-item-2">
                        <ul>
                            <li style="color: red;" th:text="${orderResponse.order.statusChinese}">等待收货</li>
                            <li style="margin:4px 0;" class="hide"  th:if="${orderResponse.order.status == 2}">
                                <i class="table_i2"></i>跟踪<i class="table_i3"></i>
                                <div class="hi">
                                    <div class="p-tit">
                                        普通快递: [[${orderResponse.order.orderSn}]]
                                    </div>
                                    <div class="hideList">
                                        <ul>
                                            <li>
                                                [北京市] 在北京昌平区南口公司进行签收扫描,快件已被拍照(您
                                                的快件已签收,感谢您使用韵达快递)签收
                                            </li>
                                            <li>
                                                [北京市] 在北京昌平区南口公司进行签收扫描,快件已被拍照(您
                                                的快件已签收,感谢您使用韵达快递)签收
                                            </li>
                                            <li>
                                                [北京昌平区南口公司] 在北京昌平区南口公司进行派件扫描
                                            </li>
                                            <li>
                                                [北京市] 在北京昌平区南口公司进行派件扫描;派送业务员:业务员;联系电话:17319268636
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="tdLi">
                                订单详情<i class="table_i3"></i>
                                <div class="hi2">
                                    <div class="p-tit">
                                        普通快递: [[${orderResponse.order.orderSn}]]
                                    </div>
                                    <div class="hideList">
                                        <ul>
                                            <li>
                                                <span>订单创建时间</span>
                                                <p th:text="${orderResponse.order.createTimeChina}"></p>
                                            </li>
                                            <li>
                                                <span>订单金额</span>
                                                <p>￥[[${orderResponse.order.payAmount}]] <del th:text="'￥' + ${orderResponse.order.totalAmount+orderResponse.order.freightAmount} + '（包含运费￥' + ${orderResponse.order.freightAmount} + '）'"></del></p>
                                            </li>
                                            <li>
                                                <span>订单获得的积分和成长值</span>
                                                <p th:text="'积分：' + ${orderResponse.order.integration} + ' 丨 成长值：' + ${orderResponse.order.growth}"></p>
                                            </li>
                                            <li>
                                                <span>订单收货地址</span>
                                                <p th:text="${orderResponse.order.receiverName} + ' ' + ${orderResponse.order.receiverPhone} + ' ' + ${orderResponse.order.receiverProvince} + ' ' + ${orderResponse.order.receiverUniversity} + ' ' + ${orderResponse.order.receiverDetailAddress}"></p>
                                            </li>
                                            <li>
                                                <span>订单项</span>
                                                <p th:each="item:${orderResponse.orderItem}" style="margin: 0" th:text="${item.bookName} + ' x' + ${item.bookCount} + ' ￥' + ${item.realAmount}"></p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </td>
                    <td class="order-item-2">
                        <button class="my-background-color-btn">确认收货</button>
                        <div class="my-background-color"><a href="javascript:;" style="margin:4px 0; ">取消订单</a></div>
                        <div class="my-background-color"><a href="javascript:;">催单</a></div>
                    </td>
                </tr>
            </table>

            <!-- 页脚部分 -->
            <div class="row" th:if="${personInfo.getOrderPage().totalPage > 0}">
                <div class="col-xxl-12">
                    <div class="basic-pagination pb-30">
                        <nav>
                            <ul style="text-align: center">
                                <li>
                                    <a href="javascript:;" class="my-pageNum" th:onclick="addSearchParam('pageNum', [[${personInfo.getOrderPage().pageNum}-1]])">
                                        <i class="fal fa-chevron-double-left"></i>
                                    </a>
                                </li>
                                <li th:each="i:${#numbers.sequence(1, personInfo.getOrderPage().totalPage)}">
                                    <a href="javascript:;"
                                       th:class="${personInfo.getOrderPage().pageNum == i ? 'active my-pageNum-color' : 'my-pageNum-color'}"
                                       th:onclick="searchPage([[${i}]])"
                                    >[[${i}]]</a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="my-pageNum" th:onclick="addSearchParam('pageNum', [[${personInfo.getOrderPage().pageNum}+1]])">
                                        <i class="fal fa-chevron-double-right"></i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <div th:if="${personInfo.getOrderPage().totalPage <= 0}" class="my-no-order">
                订单列表为空！
            </div>
            <!--<div class="order_btm">
                <div>
                    <button>上一页</button>
                    <span>1</span>
                    <button>下一页</button>
                </div>
            </div>-->
            <div style="clear:both;"></div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>
</body>
<!-- JS here -->
<script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
<script src="assets/js/vendor/waypoints.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/meanmenu.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/backToTop.js"></script>
<script src="assets/js/jquery.fancybox.min.js"></script>
<script src="assets/js/countdown.js"></script>
<script src="assets/js/nice-select.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/magnific-popup.min.js"></script>
<script src="assets/js/jquery-ui-slider-range.js"></script>
<script src="assets/js/ajax-form.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/main.js"></script>
<script type="text/javascript" th:inline="javascript">
    function addSearchParam(name, value) {
        console.log("name=" + name + ", value=" + value)
        if (name == "pageNum"){
            if (value <= 0 || value > [[${personInfo.getOrderPage().totalPage}]]) return;
        }
        if (location.href.indexOf("?") != -1){
            //如果有其他查询参数
            if (location.href.indexOf(name) == -1){
                // 如果当前的查询参数不存在，则直接拼接
                location.href = location.href + "&" + name + "=" + value;
            } else {
                // 如果当前查询参数存在，则替换
                let s1 = location.href.split("?");
                let newHref = s1[0] + "?";
                let attrs = s1[1].split("&");
                for(let i = 0; i < attrs.length; i ++){
                    if (attrs[i].indexOf(name) != -1){
                        let attr = attrs[i].split("=");
                        newHref = newHref + attr[0] + "=" + value + "&";
                    } else {
                        newHref = newHref + attrs[i] + "&";
                    }
                }
                location.href = newHref.substr(0, newHref.length-1);
            }
        } else {
            // 如果不存在任何查询参数，则拼接新的查询参数
            location.href = location.href + "?" + name + "=" + value;
        }
    }
    function addSearchParamBtn() {
        let val = $("#searchContent").val();
        addSearchParam("orderSn", val);
    }
    function searchPage(newPageNum) {
        console.log(newPageNum + " - " + [[${personInfo.getOrderPage().pageNum}]])
        if ([[${personInfo.getOrderPage().pageNum}]] != newPageNum) {
            addSearchParam("pageNum", newPageNum);
        }
    }
</script>

</html>
